<template>
  <div>
    <el-dialog title="受试者档案" :visible.sync="dialogVisible" :before-close="closeDialog" v-on:open="loadData" :close-on-click-modal="false">
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="基础信息" name="first">
          <el-form :model="form" :inline="true" :rules="rules" ref="form" labelWidth="100px">
            <el-row>
              <el-col>
                <el-form-item label="姓名" labelWidth="140px">
                  {{form.name}}
                </el-form-item>
                <el-form-item label="性别" labelWidth="40px">
                  {{form.sex}}
                </el-form-item>
                <el-form-item label="身份证号" labelWidth="80px">
                  {{form.cardid}}
                </el-form-item>
                <el-form-item label="年龄" labelWidth="40px">
                  {{form.age}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="筛选号">
                  <el-input v-model="form.candidateNum" :readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="随机号" property="randomNum">
                  <el-input v-model="form.randomNum" placeholder="此处填写随机号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="招募日期" >
                  <el-date-picker
                    v-model="form.recruitDate"
                    type="date"
                    :readonly="true"
                    placeholder="选择日期"
                    :picker-options="pickerOptions0">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="联系电话" prop="mobile" >
                  <el-input v-model="form.mobile"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="联系地址" prop="address" >
                  <el-input v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item label="紧急联系人" prop="urgentContact" >
                  <el-input v-model="form.urgentContact"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="紧急联系电话" prop="urgentMobile" >
                  <el-input v-model="form.urgentMobile"></el-input>
                </el-form-item>
                <el-form-item label="最后随访日期">
                  {{form.lastFlupDate}}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="参与项目" name="third">
          <el-form :model="form" :inline="true" :rules="rules" ref="form" labelWidth="100px">
            <el-row>
              <el-col :span="24">
                <el-form-item style="width: 100%">项目名称：{{form.projectName}}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="筛选号">{{form.candidateNum}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="招募日期" >{{form.recruitDate}}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="筛选结果" >{{form.candidateResult == 1?'失败':'成功'}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="通过筛选时间">{{form.passTime}}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="住院状态">
                  {{hosList[form.hospitalStatus].label}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="试验状态" property="status">
                  <el-select  v-model="form.testStatus" placeholder="请选择">
                    <el-option
                      v-for="item in testList"
                      :key="form.testStatus"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!--<el-form-item label="受试者号" property="subjectsNum"  >{{form.num}}</el-form-item>-->
            <el-form-item label="依从性评分">
              <el-rate
                v-model="complianceScore" show-text text-template="{value}" :texts="['1分','2分','3分','4分','5分']"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
              </el-rate>
            </el-form-item>
            <el-form-item label="试验人员评价">
              <el-input type="textarea" style="width:400px;" v-model="form.evaluate"></el-input>
            </el-form-item>
      </el-form>
        </el-tab-pane>
      </el-tabs>
      <el-row>
        <el-col :span="24" style="padding:10px;">
          <span style="color:red;float:left;">"*"为必填项。</span>
          <div class="pull-right">
            <el-button v-if="$utils.ckUIPower('S01010101')" type="primary" @click.native.prevent="handleSubmit" :disabled="editClick">保存
            </el-button>
            <el-button v-if="$utils.ckUIPower('S01010101')" @click.native.prevent="handleReset">重置</el-button>
            <el-button @click.native.prevent="closeDialog">取消</el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import http from '../../../api/http'
  var model = {hospitalStatus:0,status:0,lastFlupDate:''};
  export default {
    value:'',
    data () {
      return {
        editClick:false,
        lastFlupDate:'',
        picHead:'',
        hosList:[{label:'-'},{label:'入院'},{label:'出院'}],
        // 显示实验状态
        testList: [{
          value: 0,
          label: '-'
        }, {
          value: 1,
          label: '试验中 '
        }, {
          value: 2,
          label: '已完成'
        },{
          value: 3,
          label: '已退出'
        }],
        form: Object.assign({}, model),
        activeName: 'first',
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        rules: {},
        read: false,complianceScore:null
      }
    },
    props: {
      editDialogVisible: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      dialogVisible:{
          get:function () {
            return this.editDialogVisible
          },
          set:function () {
          }
      }
    },
    methods: {
      
      tabClick(tab){
        switch (tab.name) {
          case 'first':
            break;
          case 'second':
            break;
          case 'third':
            break;
        }
      },
      readID() {
        this.read = true;
      },
      handleReset () {
        this.form = Object.assign({}, model);
//        this.$refs.form.resetFields();
      },
      closeDialog(){
        this.editClick = false;
        this.$emit('closeEditDialog');
      },
      loadData(){
        var vm = this;
        vm.read = false;
        http.postData(vm, "/pt/subjects/detail/" + vm.$parent.seeLabId,{},function (resp) {
            var data = resp.body;
            if(data.code == 111){
              vm.form = data.value;
              vm.lastFlupDate=vm.form.lastFlupDate;
              if(vm.form.complianceScore!=undefined){
                vm.complianceScore=vm.form.complianceScore;
              }
              if(vm.form.evaluate==undefined){
                vm.form.evaluate='';
              }
              vm.picHead ='data:image/png;base64,' + vm.form.fingerImg;
            }
        });
      },
      handleSubmit (ev) {
        var vm = this;
        this.$refs.form.validate(function (valid) {
          if (valid) {
              vm.editClick = true;
            vm.form.lastFlupDate=vm.lastFlupDate;
            vm.form.complianceScore=vm.complianceScore;
            http.postData(vm, "/pt/subjects/save", {json: JSON.stringify(vm.form)}, function (resp) {
              var ret = resp.body;
              if (ret.code === '111') {
                vm.editClick = false;
                vm.$notify({title: '操作提示', message: ret.msg, type: 'success'});
                vm.form = Object.assign({}, model);
                vm.$emit('closeEditDialog'); // 关闭弹窗
                vm.$parent.onSubmit();
              } else {
                vm.editClick = false;
                vm.$notify.error({title: '操作失败', message: ret.msg});
              }
            });
          } else {
            return false
          }
        })
      }
    }
  }
</script>
<style>
  .readID {
    width: 70%;
    height: 100px;
    border-radius: 6px;
    border: 2px solid #ccc;
    margin: auto;
    font-size: 26px;
    font-weight: bold;
    color: #cccccc;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
    margin-bottom: 20px;
  }

  .title {
    width: 100px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #444444;
  }

  .wrapper {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
</style>
